<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/10 backdrop-blur-lg border-b border-white/20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center space-x-4">
            <h1 class="text-xl font-bold text-white">Tailwind CSS 4.1 + Vue 3</h1>
          </div>
          <div class="flex space-x-4">
            <button v-for="page in pages" :key="page.name" @click="currentPage = page.name" :class="[
              'px-4 py-2 rounded-lg transition-all duration-300',
              currentPage === page.name
                ? 'bg-blue-500 text-white'
                : 'text-slate-800 hover:text-slate-500 hover:bg-blue-500/20'
            ]">
              {{ page.label }}
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 页面内容 -->
    <main class="pt-16">
      <component :is="currentPageComponent" />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import HomePage from './components/HomePage.vue'
import LoginPage from './components/LoginPage.vue'
import AboutPage from './components/AboutPage.vue'
import TestTailwind from './components/TestTailwind.vue'

// 页面配置
const pages = [
  { name: 'home', label: '首页', component: HomePage },
  { name: 'login', label: '登录', component: LoginPage },
  { name: 'about', label: '关于', component: AboutPage },
  { name: 'testTailwind', label: '练习', component: TestTailwind },
]

// 当前页面
const currentPage = ref('home')

// 当前页面组件
const currentPageComponent = computed(() => {
  const page = pages.find(p => p.name === currentPage.value)
  return page?.component || HomePage
})
</script>

<style scoped>
/* 组件特定样式 */
</style>
